<template>
  <v-container>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="7" lg="6">
        <v-card>
          <v-card-title>
            <h4>未完成预约单</h4>
            <v-spacer></v-spacer>

            <v-btn icon @click="show = !show">
              <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
            </v-btn>
          </v-card-title>
          <v-expand-transition>
            <div v-show="show">
              <v-divider></v-divider>
              <v-list three-line subheader>
                <router-link
                  :to="{name:'content',query:{id:item.id}}"
                  v-for="item in responseData"
                  :key="item.title"
                >
                  <v-list-item link>
                    <v-list-item-avatar>
                      <v-icon class="red darken-1 white--text">mdi-email</v-icon>
                    </v-list-item-avatar>

                    <v-list-item-content>
                      <v-list-item-title>{{item.content}}</v-list-item-title>
                      <v-list-item-subtitle v-text="item.orgnization"></v-list-item-subtitle>
                      <v-list-item-subtitle v-text="item.time"></v-list-item-subtitle>
                    </v-list-item-content>
                  </v-list-item>
                </router-link>
              </v-list>
            </div>
          </v-expand-transition>
        </v-card>
        <div class="mt-4 text-center">
          <v-btn x-large color="secondary" @click="submit()">查看所有预约信息</v-btn>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    show: true,
    success: false,
    get: false,
    responseData: {},
    items: [
      { orgnization: "杭电社团联合会", time: "2019-11-30 09:00:00" },
      { orgnization: "Recipes", time: "Jan 17, 2014" },
      { orgnization: "Work", time: "Jan 28, 2014" }
    ]
  }),
  mounted: function() {
    this.loadData();
  },
  methods: {
    loadData: function() {
      const that = this;
      var token = "";
      token = localStorage.getItem("token");
      this.axios({
        method: "get",
        url: "http://www.hdufocus.cn:8081/reservation/unfinished",
        headers: {
          Authorization: token
        },
        data: {}
      })
        .then(function(response) {
          const status = response.status;
          if (status == 200) {
            that.responseData = response.data.data.reverse();
            that.success = true;
          }
        })
        .catch(function() {
          that.$router.push({ path: "/login" });
        })
        .then(function() {
          that.get = true;
        });
    },
    submit: function() {
      var that = this;
      that.$router.push({ path: "/manager_all" });
    }
  }
};
</script>